<?php use_helper('jQuery')?>

<script type="text/javascript">
    $(document).ready(function(){
        $("ul.gallery li").hover(function() { //On hover...
                var thumbOver = $(this).find("img").attr("src2"); //Get image url and assign it to 'thumbOver'
                
                //Set a background image(thumbOver) on the <a> tag - Set position to bottom
                $(this).find("a.thumb").css({'background' : 'url(' + thumbOver + ') no-repeat center'});
                
                //
                $(this).animate({top : -15, right: 5 }, 150);
                
                //Animate the image to 0 opacity (fade it out)
                $(this).find("span").stop().fadeTo('slow', 0 , function() {
                    $(this).hide() //Hide the image after fade
                });
                
            } , 
            function() { //on hover out...
                //Fade the image to full opacity 
                $(this).find("span").stop().fadeTo('normal', 1).show();
                $(this).animate({top : -10, right: 0 }, 150);
            }
        );
    });
</script>
<div id="categories" class="span-17 last">
    <ul class="gallery">
        <?php 
            $i = 1;
            foreach ($categories as $key=>$category):
        ?>
            <li i="<?php echo $i ?>"
                <?php if ($i>12 && $i%3 == 0) {
                    echo 'style="margin-bottom: 0px; margin-right: 0px;"';
                } elseif ($i%3 == 0) {
                    echo 'style="margin-right: 0px;"';
                } elseif($i>12) {
                    echo 'style="margin-bottom: 0px;"';
                } ?>
            >
                <?php echo jq_link_to_remote(
                    '<span>
                        <img alt="'.$category->getName().'" 
                            src="/uploads/'.(in_array($category->getId(), $sf_data->getRaw('categories_done')) ? $category->getThumb2() : $category->getThumb1()).'"
                            src2="/uploads/'.$category->getThumb2().'"
                        />
                    </span>',
                    array(
                        'update' => 'main-content',
                        'url'    => url_for(in_array($category->getId(), $sf_data->getRaw('categories_done')) ? 'nominaciones_edit':'nominaciones_new', $category),
                        'before' => 'showLoader();',
                        'complete' => 'hideLoader();',
                        'script' => true
                    ), array(
                        'class' => 'thumb'
                    )); 
                ?>
            </li>
        <?php 
            $i++;
            endforeach; 
        ?>
    </ul>
</div>